<template>
	<view class="hotel-orders" style="padding-bottom: 0;">
		<!-- 筛选 -->
		<view class="filter-bar flex-row-between">
			<block v-for="(item, index) in filterBar" :key="index">
				<view class="item" :class="{'active' : filterCurrent == item.id}" @click="filterList(item.id)">
					{{item.title}} ({{item.num}})
				</view>
			</block>
		</view>
		<!-- 列表 -->
		<LoadMore ref="LoadMore" id="LoadMore" :token="true" :diffHeight="192" :initData="initData"
			@dataRefresh='dataRefresh' @infoRefresh="infoRefresh">
			<view class="order-list">
				<block v-for="(item, index) in dataList" :key="index">
					<view class="box-shadow item">
						<view class="part1 font12 flex-row-between" @click="Onhook(item,'one')">
							<view class="font-theme flex-row-start">
								<view v-if="item.order_status==10" class="hook flex-row-center"
									:class="item.hook=='on'?'hook_a':'hook_b'">
									<image v-if="item.hook=='on'"
										src="https://static.newbeaconhotels.com/app/hotel/group/hook.png" mode=""></image>
								</view>
								<view>{{item.order_status==10?'待发货':'已发货'}}</view>
							</view>
							<view class="flex-row-start">{{item.order_no}} {{item.is_spell==1?'单购':'团购'}}</view>
						</view>
						<view class="part2 flex-row-start">
							<view class="image bg-cover"
								:style="{backgroundImage: 'url(' + imgFullUrl+item.order_goods.logo + ')'}"></view>
							<view class="info flex-column-between">
								<view class="font14">{{item.order_goods.goods_name}}</view>
								<view class="font12 flex-row-between">
									<view class="font-969696">x{{item.order_goods.total_num}}</view>
									<view>￥{{item.order_goods.goods_price}}</view>
								</view>
							</view>
						</view>
						<view class="part3 flex-row-between">
							<view class="font12">合计：<text
									class="font14 font-assist">￥{{item.pay_status==2?item.total_price:item.pay_price}}</text>
							</view>
							<view class="flex-row-end">
								<view v-if="item.order_status==10" class="btn blue" @click="Ontrue(item,'one')">
									发货
								</view>
							</view>
						</view>
						<!-- <view class="part3 flex-row-between">
						<view class="font12">退款金额：<text class="font14 font-assist">￥209</text></view>
						<view class="font13 font-969696">等待处理</view>
					</view> -->
					</view>
				</block>
			</view>
		</LoadMore>
		<view class="order-hook flex-row-between">
			<view class="flex-row-start" @click="Onhook({},'two')">
				<view class="hook-all flex-row-center" :class="allhook?'hook-all1':'hook-all2'">
					<image v-if="allhook" src="https://static.newbeaconhotels.com/app/hotel/group/hook.png" mode=""></image>
				</view>
				<view class="hook-text font13">
					<text>共选中</text>
					<text class="margin-4 font-ff6428">{{allnum}}</text>
					<text class="margin-10">个</text>
					<text>发货成功</text>
					<text class="margin-4 font-ff6428">{{filterBar[1].num}}</text>
					<text>个</text>
				</view>
			</view>
			<view class="btn blue" @click="Ontrue({},'two')">批量发货</view>
		</view>
	</view>
</template>

<script>
	import LoadMore from "@/components/j-loadMore/index.vue";
	export default {
		components: {
			LoadMore
		},
		data() {
			return {
				allhook: false, //全选
				allnum: 0, //选中数量
				filterBar: [{
						id: 10,
						title: '待发货',
						num: 0
					},
					{
						id: 20,
						title: '已发货',
						num: 0
					}
				],
				filterCurrent: 10, // 高亮的id
				dataList: [], //数据
				userInfo: {
					type: "user"
				},
				imgFullUrl: this.$Config.http_static, //图片地址
				// 传参数据
				initData: {
					url: 'outCouponList',
					param: {
						order_status: '10',
					}
				},
			}
		},
		onLoad: function(options) {},
		methods: {
			infoRefresh(e) {
				this.filterBar[0].num = e.no_count
				this.filterBar[1].num = e.yes_count
			},
			// LoadMore返回列表数据
			dataRefresh(e) {
				let all = true
				e.forEach(item => {
					if (!item.hook) {
						item.hook = 'off'
					}
					if (item.hook == 'off') {
						all = false
					}
				})
				this.allhook = all
				this.dataList = e
			},
			//选中事件
			Onhook(obj, type) {
				if (this.initData.param.order_status == 20) {
					return
				}
				let list = this.dataList
				let all = true
				let num = 0
				if (type == 'one') {
					list.forEach(item => {
						if (item.id == obj.id) {
							item.hook = (item.hook == 'off') ? 'on' : 'off'
						}
						if (item.hook == 'off') {
							all = false
						}
						if (item.hook == 'on') {
							num = num + 1
						}
					})
					this.allhook = all
					this.allnum = num
				}
				if (type == 'two') {
					list.forEach(item => {
						if (this.allhook) {
							item.hook = 'off'
						} else {
							item.hook = 'on'
						}
					})
					this.allhook = !this.allhook
					this.allnum = this.allhook ? list.length : 0
				}
				this.dataList = list
				this.$forceUpdate()
			},
			// 筛选列表
			filterList(id) {
				this.initData.param.order_status = id
				this.filterCurrent = id
				this.$refs.LoadMore.oncutRefresh(this.initData)
			},
			// 发货
			Ontrue(obj, type) {
				if (this.initData.param.order_status == 20) {
					return
				}
				let content = ''
				let data = {
					order_id: ''
				}
				let that = this
				if (type == 'one') {
					content = '您确定要发货吗'
					data.order_id = obj.id
				}
				if (type == 'two') {
					content = '您确定要批量发货吗'
					this.dataList.forEach(item => {
						if (item.hook == 'on') {
							data.order_id = data.order_id + item.id + ','
						}
					})
					data.order_id = data.order_id.substr(0, data.order_id.length - 1);
				}
				uni.showModal({
					title: '操作提示',
					confirmText: '确定',
					confirmColor: '#ff3c37',
					cancelText: '取消',
					content: content,
					success: function(res) {
						if (res.confirm) {
							that.$Http({
								url: 'sendOutCoupon',
								token: true,
								type: 'POST',
								data: data,
							}).then(res => {
								if (res.code == 1) {
									that.$refs.LoadMore.oncutRefresh(that.initData)
								} else {
									uni.showToast({
										icon: 'none',
										duration: 2000,
										title: res.msg
									});
								}
							});
						}
					}
				});
			},
			// 时间戳转日期
			getDate(time) {
				return this.$base.formatTime(new Date(parseInt(time) * 1000), 'yyyy/MM/dd hh:ss')
			},
			//跳转
			goNext(url) {
				this.$Router.push(url)
			}
		}
	}
</script>

<style lang="less">
	@import url("style.less");
</style>
